<template>
    <div class="child-router-view second">
        <el-scrollbar @click.stop class="menu">
        <div class="parent-title">分类名称</div>
        <el-menu :router="true" :default-active="defaultActivePath">
            <Items :items="items"></Items>
        </el-menu>
        </el-scrollbar>
        <router-view class="view" />
    </div>
</template>

<style lang="scss" scoped>
.child-router-view.second {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;

  > .menu {
    width: 150px;
    background: #fff;
    border-radius: 4px;
    margin-right: 15px;

    .parent-title {
      font-size: 16px;
      font-weight: bolder;
      color: #5b5b5b;
      line-height: 58px;
      text-align: center;
      border-bottom: solid 1px #e6e6e6;
    }
    .el-menu {
      border-right-width: 0;
    }
  }
  > .view {
    flex: 1;
    min-width: 0;
    min-height: 0;
  }
}
</style>

<script>

import {
	mapGetters
} from 'vuex' ;

import Items from '@/components/app/menu/Items' ;

export default {
  props: [
      "routes"
  ],

  components:{
    Items
  },

  computed:{
    ...mapGetters('Menu' , [
      'isCurrentPath',
      'single'
    ]),

    items(){

      let {
        single,
        routes
      } = this ;

      return single(routes) ;
    },

    defaultActivePath(){

        let {
            routes,
            isCurrentPath
        } = this,
        item = routes.find(({
            fullPath
        }) => isCurrentPath(fullPath)) ;

        if(item){

            return item.fullPath ;
        }
    }
  }
};
</script>